<template>
  <div style="overflow-y:hidden;background:white;">
    <div class="print-box">
      <el-form  class="text-center form" size="mini">
        <el-form-item>
          <div class="printLabel-top">
            <span class="wujiayuan">
              <label>物价员：</label>
              <input name="person" v-model="personName" />
            </span>
            <el-button type="success" @click="startPrint">开始打印</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="bgPrintDataBox"></div>
      <div class="printDataHtml2"></div>
      <!-- <div class="printDataHtml printDataHtmlBox" v-cloak> -->
        <div class="product-info-box">
          <div class="col-xs-4" v-for="(item, index) in printData" :class="{marginTop: index % 21 < 3 && index > 3}">
            <!-- <div class="l-top text-center">
                <img v-show="printType == 0" :src="imgUrl" height="46" />
                <div class="store-name" v-show="printType == 1">{{storeName}}</div>
              </div> -->
            <div class="l-name text-center">
              <p>商品标价签</p>
            </div>
            <img src="@/assets/img/printZhang.png" id="seePrintZhang" />
            <div class="l-tabel">
              <ul class="list-inline clearfix">
                <li class="col-xs-12 product-name" style="position: relative"><span class="tit">商品名</span><span
                    class="msg">{{item.productName}}
                    <span class="social"
                      style="color: red; float: right; background-color:#fff; position: absolute; right: 0; z-index: 1000">{{item.isYiBao == 1 ? '【医保】' : ''}}</span>
                  </span></li>
                <li class="col-xs-6"><span class="tit">规&nbsp;&nbsp;&nbsp;&nbsp;格</span><span
                    class="msg">{{item.standard}}</span></li>
                <li class="col-xs-6"><span class="tit">单&nbsp;&nbsp;&nbsp;&nbsp;位</span><span
                    class="msg">{{item.unit}}</span></li>
                <li class="col-xs-12"><span class="tit">厂&nbsp;&nbsp;&nbsp;&nbsp;商</span><span
                    class="msg">{{item.produceFactory}}</span></li>
                <li class="col-xs-6"><span class="tit">编&nbsp;&nbsp;&nbsp;&nbsp;码</span><span
                    class="msg">{{item.productCode}}</span></li>
                <li class="col-xs-6"><span class="tit">物价员</span><span class="msg">{{personName}}</span></li>
                <li class="col-xs-6 money"><span class="tit">零售价</span><span
                    class="msg">{{item.localRetailPrice}}</span></li>
                <li class="col-xs-6 money"><span class="tit">会员价</span><span class="msg">{{item.memberPrice}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/assets/scss/print.scss'
  import $ from 'jquery'

  export default {
    name: "printnoback",
    data() {
      return {
        printData: JSON.parse(this.$route.query.products),
        newPrintData: [],
        personName: "007",
      };
    },
    created: function() {
      this.initData();
    },
    mounted: function() {
      var len = Math.ceil(this.printData.length / 21);
      for (var i = 1; i < len; i++) {
        $(".printDataHtml2").after("<div class='printDataHtml3'></div>");
      }
    },
    methods: {
      toList() {
        this.$router.push({
          name: 'List',
        })
      },
      initData: function() {
        let printData = this.printData;
        console.log(printData)
        let tdlength = printData.length;
        let trlength = Math.ceil(tdlength / 3);
        let store = [];
        $.each(printData, function(index, item) {
          var tr = Math.floor(index / 3)
          if (!store[tr]) {
            store[tr] = []
          }
          store[tr].push(item)
        })

        this.newPrintData = store;
      },
      startPrint: function() {
        document.close();
        window.print();
      }
    }
  }
</script>
<style lang="scss" scoped>
  @media screen {
    .print-box {
      width: 1030px;
      margin: 0 auto;
    }

    .printDataHtml {
      position: absolute;
      top: 50px;
      z-index: 2;
    }
  }

  @media print {
    #uploadFile,
    .bgPrintDataBox,
    .printDataHtml2,
    .printDataHtml3 {
      display: none
    }

    .printDataHtml {
      position: absolute;
      top: -23px;
      z-index: 2;
    }
  }

  .print-box{
    .form{
      margin-bottom: 50px;
    }

    .product-info-box {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }

    .col-xs-6 {
      width: 50%;
      float: left;
      padding: 0 !important;
    }

    .col-xs-4 {
      width: 33.33333333%;
      box-sizing: border-box;
      border: 1px solid #0da697;
    }

    .col-xs-12 {
      width: 100%;
      float: left;
      padding: 0 !important;
    }

    .marginTop {
      margin-top: 40px;
      page-break-after: always;
    }

    label {
      margin-bottom: 0;
    }

    .printLabel-top {
      height: 54px;
      line-height: 1;
      text-align: left;
      display: flex;
      align-items: center;
    }

    .printLabel-top div {
      margin: 0 10px;
    }

    .printLabel-top div.wujiayuan input {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0 3px;
      height: 28px;
    }

    .product-info-box>ul>li>.l-top {
      height: 46px;
    }

    .printLabel-top>div.uploadImg>input {
      width: 80px;
      height: 30px;
      opacity: 0;
      cursor: pointer;
    }

    .printLabel-top>div.uploadImg>label {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      text-align: center;
      cursor: pointer;
    }

    .uploadImg {
      position: relative;
    }

    .store-name {
      height: 46px;
      line-height: 46px;
      border-bottom: 1px solid #0a776d;
      font-size: 30px;
      letter-spacing: 2px;
      color: #666 !important;
      overflow: hidden;
    }

    .product-info-box>ul>li>.l-tabel>ul>li.product-name>span.msg>span.social {
      height: 18px !important;
      line-height: 18px !important;
      font-size: 16px !important;
      color: red !important;
    }
  }

</style>
